import React, {FC, useEffect, useRef, useState} from "react";
import * as echarts from 'echarts';
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const UserData: FC<any> = ({MobxData}) => {
    const dataContent = useRef<any>();

    const {userList, getUserList} = MobxData
    const {classList, getClassList} = MobxData

    // const [graphData, setGraphData] = useState<any>({});
    useEffect(() => {
        // 获取用户数据
        getUserList()
        // 获取班级数据
        getClassList()
    }, [])


    useEffect(() => {
        // 组装图表数据
        let picture: any = {}
        classList.forEach((item: { name: string; }) => {
            picture[item.name] = 0
        })
        userList.forEach((item: { role: number; classname: string; }) => {
            item.role === 0 && picture[item.classname]++
        })
        // 写入数据
        let graphData = {
            title: {
                text: '用户人数分析',
                x: 'center'
            },
            yAxis: {
                type: 'value'
            },
            xAxis: {
                type: 'category',
                data: Object.keys(picture)
            },
            series:
                {
                    type: 'line',
                    data: Object.values(picture)
                }
        }
        // 绘制折线图
        graphData.series && echarts.init(dataContent.current).setOption(graphData);
    }, [userList, classList])

    return (
        <div style={{width: "100%"}}>
            {/*<h1>用户分析</h1>*/}
            <BreadcrumbPath/>
            <div ref={dataContent} style={{width: "100%", height: "550px"}}></div>
        </div>
    )
}
export default inject('MobxData')(observer(UserData));